<script setup>
import { useRouter } from 'vue-router'
let routers = useRouter()
let toaccount = () => {
    routers.push('/account')
}
</script>

<template>
    <div>
        <div class="container">
            <!-- 标题 -->
            <div class="top-box">
                <div class="toptext">
                    <span id="toaccount" @click="toaccount">账号</span>
                    <svg viewBox="0 0 18 18" role="presentation" aria-hidden="true" focusable="false"
                        style="height: 10px; width: 10px; fill: rgb(118, 118, 118);">
                        <path
                            d="m4.29 1.71a1 1 0 1 1 1.42-1.41l8 8a1 1 0 0 1 0 1.41l-8 8a1 1 0 1 1 -1.42-1.41l7.29-7.29z"
                            fill-rule="evenodd"></path>
                    </svg>
                    <span id="right">登录和安全</span>
                </div>
                <div class="bottomtext">登录和安全</div>
            </div>

            <!-- 登录 -->
            <div class="loginbox">
                <div class="login-title">登录</div>
                <div class="pwd-title">
                    <div class="pwd">密码</div>
                    <div class="update">更新</div>
                </div>
                <div>最后更新时间：1年前</div>
            </div>

            <!-- 社交账号 -->
            <div class="socialbox">
                <div class="social-title">社交账号</div>
                <!-- Facebook -->
                <div class="facebkbox">
                    <div class="facebk">
                        <div>Facebook</div>
                        <div class="guanlian">关联</div>
                    </div>
                    <div>未关联</div>
                </div>

                <!-- 谷歌 -->
                <div class="googlebox">
                    <div class="google">
                        <div>谷歌</div>
                        <div class="guanlian">关联</div>
                    </div>
                    <div>未关联</div>
                </div>

                <!-- 微博 -->
                <div class="weibobox">
                    <div class="weibo">
                        <div>微博</div>
                        <div class="guanlian">关联</div>
                    </div>
                    <div>未关联</div>
                </div>
            </div>

            <!-- 设备记录 -->
            <div class="equipment-box">
                <div class="equipment-title">设备记录</div>
                <div class="equipment">
                    <div class="line1">
                        <svg viewBox="0 0 24 24" role="img" aria-hidden="false" aria-label="电脑设备" focusable="false"
                            style="height: 30px; width: 30px; display: block; fill: currentcolor;">
                            <path
                                d="m22.5 2h-21c-.8271484 0-1.5.6728516-1.5 1.5v14c0 .8271484.6728516 1.5 1.5 1.5h8.5v3h-5.5c-.2763672 0-.5.2236328-.5.5s.2236328.5.5.5h15c.2763672 0 .5-.2236328.5-.5s-.2236328-.5-.5-.5h-5.5v-3h8.5c.8271484 0 1.5-.6728516 1.5-1.5v-14c0-.8271484-.6728516-1.5-1.5-1.5zm-21 1h21c.2753906 0 .5.2241211.5.5v11.5h-22v-11.5c0-.2758789.2241211-.5.5-.5zm11.5 19h-2v-3h2zm9.5-4h-21c-.2758789 0-.5-.2246094-.5-.5v-1.5h22v1.5c0 .2753906-.2246094.5-.5.5z">
                            </path>
                        </svg>
                        <div class="line1-text">Windows 10.0 Chrome</div>
                        <div class="out">退出设备</div>
                    </div>
                    <div class="now">当前会话</div>
                    <div class="place">Chengdu, Sichuan</div>
                </div>
                <div class="equipment equipment2">
                    <div class="line1">
                        <svg viewBox="0 0 24 24" role="img" aria-hidden="false" aria-label="移动设备" focusable="false"
                            style="height: 30px; width: 30px; display: block; fill: currentcolor;">
                            <path
                                d="m16.5 0h-9a2.5 2.5 0 0 0 -2.5 2.5v19c0 1.38 1.12 2.5 2.5 2.5h8.99a2.5 2.5 0 0 0 2.51-2.5v-19c0-1.37-1.12-2.5-2.5-2.5zm-10.5 2.5c0-.83.67-1.5 1.5-1.5h8.99c.84 0 1.51.68 1.51 1.5v.5h-12zm0 1.5h12v15h-12zm12 17.5c0 .83-.67 1.5-1.5 1.5h-9a1.51 1.51 0 0 1 -1.5-1.5v-1.5h12zm-8 0a .5.5 0 0 1 .5-.5h3a .5.5 0 1 1 0 1h-3a .5.5 0 0 1 -.5-.5z"
                                fill-rule="evenodd"></path>
                        </svg>
                        <div class="line1-text">Mobile device · Airbnb</div>
                        <div class="out">退出设备</div>
                    </div>
                    <div class="place">Chengdu, Sichuan</div>
                </div>
            </div>

            <!-- 停用账号 -->
            <div class="stop-box">
                <div class="stop-title">账号</div>
                <div class="stop">
                    <div>停用账号</div>
                    <div class="stop-btn">停用</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.container {
    margin: 0 auto;
    // padding-left: 25%;
    // border: 1px solid #000;
    width: 68%;
    color: rgb(72, 72, 72);

    .top-box {
        margin-bottom: 80px;

        .toptext {
            font-size: 14px;
            font-weight: 600;

            #toaccount:hover {
                text-decoration: underline;
                cursor: pointer;
            }

            span {
                margin: 10px;
                margin-left: 0;
            }

            #right {
                margin-left: 10px;
            }
        }

        .bottomtext {
            font-size: 32px;
            font-weight: 800;
            margin: 10px;
            margin-left: 0;
        }
    }

    .loginbox {
        // border: 1px solid #000;
        width: 60%;
        border-bottom: 1px solid rgb(235, 235, 235);
        padding-bottom: 20px;

        .login-title {
            font-size: 24px;
            font-weight: 800;
            margin-bottom: 32px;
        }

        .pwd-title {
            display: flex;
            justify-content: space-between;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 10px;

            .update {
                color: rgb(0, 132, 137);
                cursor: pointer;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }

    .socialbox {
        // border: 1px solid #000;
        width: 60%;
        margin-top: 20px;

        .guanlian {
            color: rgb(0, 132, 137);
            cursor: pointer;

            &:hover {
                text-decoration: underline;
            }
        }

        .social-title {
            font-size: 24px;
            font-weight: 800;
            margin-bottom: 32px;
        }

        .facebkbox {
            border-bottom: 1px solid rgb(235, 235, 235);
            padding-bottom: 20px;

            .facebk {
                display: flex;
                justify-content: space-between;
                font-size: 16px;
                font-weight: 600;
                margin-bottom: 10px;
            }
        }

        .googlebox {
            margin-top: 20px;
            border-bottom: 1px solid rgb(235, 235, 235);
            padding-bottom: 20px;

            .google {
                display: flex;
                justify-content: space-between;
                font-size: 16px;
                font-weight: 600;
                margin-bottom: 10px;
            }
        }

        .weibobox {
            margin-top: 20px;
            border-bottom: 1px solid rgb(235, 235, 235);
            padding-bottom: 20px;

            .weibo {
                display: flex;
                justify-content: space-between;
                font-size: 16px;
                font-weight: 600;
                margin-bottom: 10px;
            }
        }
    }

    .equipment-box {
        // border: 1px solid #000;
        width: 60%;
        margin-top: 60px;

        .equipment-title {
            font-size: 24px;
            font-weight: 800;
            margin-bottom: 32px;
        }

        .equipment {
            border-bottom: 1px solid rgb(235, 235, 235);
            padding-bottom: 20px;

            .line1 {
                display: flex;

                .line1-text {
                    margin-left: 20px;
                }

                .out {
                    margin-left: 326px;
                    color: rgb(0, 132, 137);
                    font-weight: 600;
                    cursor: pointer;

                    &:hover {
                        text-decoration: underline;
                    }
                }
            }

            .now {
                font-size: 12px;
                font-weight: 800;
                width: 58px;
                height: 20px;
                background-color: rgb(242, 242, 242);
                text-align: center;
                line-height: 20px;
                border-radius: 4px;
                margin-left: 50px;
                margin-top: -6px;
            }

            .place {
                margin-left: 50px;
                font-size: 16px;
                font-weight: 400;
                color: #484848;
            }
        }

        .equipment2 {
            margin-top: 20px;
            border-bottom: 1px solid rgb(235, 235, 235);
            padding-bottom: 20px;
        }
    }

    .stop-box {
        width: 100%;
        // background-color: red;
        border-bottom: 1px solid rgb(235, 235, 235);
        padding-bottom: 20px;

        .stop-title {
            font-size: 24px;
            font-weight: 800;
            color: rgb(72, 72, 72);
            margin-top: 30px;
            margin-bottom: 30px;
        }

        .stop {
            display: flex;
            justify-content: space-between;

            .stop-btn {
                color: rgb(217, 57, 0);
                cursor: pointer;

                &:hover {
                    text-decoration: underline;
                    color: rgb(0, 132, 137);
                }
            }
        }
    }
}
</style>